<template>
  <div class="search_id">
    <div class="title"><span>物资入库管理</span></div>
    <el-container>
      <el-main>
        <!-- 查询start -->
        <div style="float: left">
          <el-form
            :model="formInline"
            ref="formInlineRef"
            :inline="true"
            class="demo-form-inline"
          >
            <el-form-item label="厂牌型号" prop="factoryPlate">
              <el-input
                v-model="formInline.factoryPlate"
                placeholder="请输入厂牌型号"
              ></el-input>
            </el-form-item>
            <el-form-item label="车牌号" prop="carNumber">
              <el-input
                v-model="formInline.carNumber"
                placeholder="请输入车牌号"
              ></el-input>
            </el-form-item>
            <el-form-item label="司机姓名" prop="carName">
              <el-input
                v-model="formInline.carName"
                placeholder="请输入司机姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属公司" prop="companies">
              <el-input
                v-model="formInline.companies"
                placeholder="请输入所属公司"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(formInline)"
                ><i class="el-icon-search"></i>查询</el-button
              >
              <el-button @click="resetForm('formInlineRef')"
                ><i class="el-icon-refresh-left"></i>重置</el-button
              >
            </el-form-item>
          </el-form>
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >切换第二、第三行的选中状态</el-button
          >
          <el-button @click="toggleSelection()">取消选择</el-button> -->
        </div>
        <!-- 查询end  -->
        <el-col>
          <div style="float: left">
            <el-button
              type="primary"
              @click="dialogFormVisible = true"
              size="small"
              plain
              ><i class="el-icon-plus"></i>新增</el-button
            >
            <el-button
              type="danger"
              @click="DelListCar(delList)"
              size="small"
              plain
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </div>
        </el-col>

        <!-- 添加start -->
        <el-dialog title="新增入库管理" :visible.sync="dialogFormVisible">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item label="货物名称" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.proName"
                  placeholder="请输入货物名称"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="类型" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.proType"
                  placeholder="请输入类型"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="材质" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.material"
                  placeholder="请输入材质"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="规格" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.specs"
                  placeholder="请输入规格"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="国家" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.productions1"
                  placeholder="请输入产地国"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="省市" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.productions2"
                  placeholder="请输入省市"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="数量" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.num"
                  placeholder="请输入数量"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="单价" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.price"
                  placeholder="请输入单价"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="支付方式" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.payType"
                  placeholder="请输入支付方式"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="登记人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.registrant"
                  placeholder="请输入登记人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="备注" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleForm.remarks"
                  placeholder="请输入备注"
                ></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCar(ruleForm)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 添加end -->

        <!-- 修改start -->
        <el-dialog title="修改入库管理" :visible.sync="dialogFormVisibleEdit">
          <el-form
            :model="ruleFormEdit"
            status-icon
            :rules="rules"
            ref="ruleFormEdit"
            label-width="110px"
            class="demo-ruleFormEdit"
          >
            <el-form-item label="货物名称" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.proName"
                  placeholder="请输入货物名称"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="类型" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.proType"
                  placeholder="请输入类型"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="材质" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.material"
                  placeholder="请输入材质"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="规格" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.specs"
                  placeholder="请输入规格"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="国家" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.productions1"
                  placeholder="请输入产地国"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="省市" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.productions2"
                  placeholder="请输入省市"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="数量" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.num"
                  placeholder="请输入数量"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="单价" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.price"
                  placeholder="请输入单价"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="支付方式" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.payType"
                  placeholder="请输入支付方式"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="登记人" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.registrant"
                  placeholder="请输入登记人"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="创建时间" required>
              <el-col :span="11">
                <el-form-item prop="buyDate">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleFormEdit.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="备注" required>
              <el-col :span="11">
                <el-input
                  v-model="ruleFormEdit.remarks"
                  placeholder="请输入备注"
                ></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="UpdCar(ruleFormEdit)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 修改end -->

        <!-- 显示start -->
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%; text-align: center"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="proName"
            label="货物名称"
            width="120"
          ></el-table-column>
          <el-table-column prop="proType" label="类型" width="120">
          </el-table-column>
          <el-table-column
            prop="material"
            label="材质"
            width="120"
          ></el-table-column>
          <el-table-column prop="specs" label="规格" width="150">
          </el-table-column>
          <el-table-column
            prop="productions1"
            label="国家"
            width="150"
          ></el-table-column>
          <el-table-column prop="productions2" label="省市" width="120">
          </el-table-column>
          <el-table-column prop="num" label="数量" width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="120"
          ></el-table-column>
          <el-table-column prop="payType" label="支付方式" width="120">
          </el-table-column>
          <el-table-column
            prop="registrant"
            label="登记人"
            width="120"
          ></el-table-column>
          <el-table-column prop="remarks" label="备注" width="120">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="(dialogFormVisibleEdit = true), EditCar(scope.row.id)"
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                type="text"
                size="small "
                @click="SingledelCar(scope.row.id)"
                ><i class="el-icon-close"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 显示end -->
        <!-- 分页start -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
        <!-- 分页ends -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "vehicle",
  data() {
    return {
      //表单数据
      tableData: [], //显示
      delList: [], //被选中的记录数据
      ids: [], //批量删除ID
      //分页
      currentPage: 1, //当前页码
      total: 0, //总条数
      pageSize: 5, //每页数据条
      //查询
      formInline: {
        factoryPlate: "",
        carNumber: "",
        carName: "",
        companies: "",
      },
      //添加
      dialogTableVisible: false,
      dialogFormVisible: false, //添加模态框
      dialogFormVisibleEdit: false, //反填模态框
      //添加
      ruleForm: {
        proName: "",
        proType: "",
        material: "",
        specs: "",
        productions1: "",
        productions2: "",
        num: "",
        price: "",
        payType: "",
        registrant: "",
        deleted: "",
        remarks: "",
      },
      //编辑
      ruleFormEdit: {
        id: "",
        proName: "",
        proType: "",
        material: "",
        specs: "",
        productions1: "",
        productions2: "",
        num: "",
        price: "",
        payType: "",
        registrant: "",
        deleted: "",
        remarks: "",
        createTime: "",
      },
      formLabelWidth: "120px",
      rules: {},
      ImageUrlfileList: [],
      ImageUrlAction: "https://localhost:44319/api/Shipper/UpLoad",
      //索引
      vehicleIndex: 0,
    };
  },
  computed: {
    //计算属性
    tou() {
      console.log("文件上传打印代码", window.sessionStorage.getItem("token"));
      return {
        Authorization: window.sessionStorage.getItem("token"),
      };
    },
  },
  created() {
    //商品显示
    this.GetList();
  },
  inject: ["reload"], //注入
  methods: {
    //查看
    handleClick(row) {
      console.log(row);
    },
    //全选
    handleSelectionChange(val) {
      console.log("handleSelectionChange--", val);
      this.delList = val; //把将要删除的数据存进集合中
    },
    // 分页
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //查询
    onSubmit(formInline) {
      this.axios
        .get(
          "http://192.168.31.63:8033/VehicleManagementAPI/GetCarRegistration?factoryPlate=" +
            formInline.factoryPlate +
            "&carNumber=" +
            formInline.carNumber +
            "&carName=" +
            formInline.carName +
            "&companies=" +
            formInline.companies +
            ""
        )
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
          console.log(res.data);
        });
    },
    //重置
    resetForm(formInlineRef) {
      this.$refs[formInlineRef].resetFields();
    },

    ImageUrlBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    handleAvatarSuccess(response, file) {
      this.ruleForm.llicencePhoto = response.newFileName;
      console.log(this.llicencePhoto);
    },

    //显示物资入库集合
    GetList() {
      this.axios
        .get(
          "https://localhost:44351/api/app/warehousing/warehousing-show?SkipCount=1&MaxResultCount=2&Sorting=1"
        )
        .then((res) => {
          this.tableData = res.data.items;
          this.total = res.data.count;
          console.log(res.data);
        });
    },
    //添加物资入库
    addCar(ruleForm) {
      console.log(ruleForm);
      this.axios({
        url: "https://localhost:44351/api/app/warehousing/warehousing-add",
        method: "post",
        data: this.$qs.stringify(ruleForm),
      }).then((res) => {
        if (res.data != 200) {
          this.$message.success("添加成功");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        } else {
          this.$message.error("添加失败");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        }
      });
    },
    //单删
    SingledelCar(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios({
            url:
              "https://localhost:44351/api/app/warehousing/" +
              id +
              "/warehousing-del",
            method: "delete",
          }).then((res) => {
            console.log(res);
            if (res.data != 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //反填模态框
    EditCar(item) {
      this.dialogFormVisibleEdit == true;
      this.axios
        .get(
          "https://localhost:44351/api/app/warehousing/" +
            item +
            "/warehousing-find"
        )
        .then((res) => {
          console.log(res.data);
          this.ruleFormEdit = res.data;
        });
    },
    //修改车辆
    UpdCar(ruleFormEdit) {
      console.log(ruleFormEdit);
      this.axios({
        url:
          "https://localhost:44351/api/app/warehousing/warehousing-upt?id=" +
          ruleFormEdit.id,
        method: "put",
        data: this.$qs.stringify(ruleFormEdit),
      }).then((res) => {
        if (res.data != 200) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        } else {
          this.$message.error("修改失败");
          this.dialogFormVisible = false; //关闭模态框
          this.reload(); //局部刷新
        }
      });
    },
    //批量删除
    DelListCar(rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //循环获取要删除的Id并存进数组中
          rows.forEach((element) => {
            this.ids.push(element.registrationID);
          });
          // console.log(JSON.stringify(this.ids));
          // console.log(JSON.stringify(this.ids).length);
          //删除ID数组
          var num = JSON.stringify(this.ids).substring(
            1,
            JSON.stringify(this.ids).length - 1
          ); //装换成json格式在截取
          console.log(num);
          //Ajax执行删除
          this.axios({
            url:
              "http://192.168.31.63:8033/VehicleManagementAPI/DelCar?id=" + num,
            method: "post",
          }).then((res) => {
            console.log(res.data);
            if (res.data.meta == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败！");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.search_id {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
}
.title span {
  float: left;
  padding-top: 15px;
  color: #999999;
  margin-left: -80px;
}
</style>